<template>
    <div class="studentbox">
        <!--标签页 -->
        <el-tabs
            v-model="activeName"
            class="demo-tabs"
            @tab-click="handleClick"
        >
            <el-tab-pane label="信息" name="first">
                <!-- 头部信息 -->
                <el-row class="head" :gutter="20">
                    <el-col :span="4">
                        <el-select
                            v-model="value"
                            class="m-2"
                            placeholder="姓名"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select
                            v-model="value"
                            class="m-2"
                            placeholder="年龄"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select
                            v-model="value"
                            class="m-2"
                            placeholder="性别"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="4">
                        <el-select
                            v-model="value"
                            class="m-2"
                            placeholder="学历"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-col>
                    <el-col :span="2"></el-col>
                    <el-col :span="6">
                        <el-button type="primary">
                            &nbsp;&nbsp;确认&nbsp;&nbsp;
                        </el-button>
                        <el-button :icon="Search" />
                        <el-button :icon="Search" />
                    </el-col>
                </el-row>

                <!-- 表格信息 -->
                <el-row>
                    <el-table
                        ref="multipleTableRef"
                        :data="tableData"
                        style="width: 100%"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55" />
                        <el-table-column label="专业学院" width="120">
                            <template #default="scope">
                                {{ scope.row.date }}
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="姓名"
                            property="name"
                            width="140"
                        />
                        <el-table-column
                            label="年龄"
                            property="name"
                            width="140"
                            show-overflow-tooltip
                        />
                        <el-table-column
                            label="性别"
                            property="name"
                            width="140"
                        />
                        <el-table-column
                            label="学历"
                            property="name"
                            width="140"
                        />
                        <el-table-column
                            label="联系方式"
                            property="name"
                            width="140"
                        />
                        <el-table-column
                            label="入学时间"
                            property="name"
                            width="140"
                        />
                        <el-table-column
                            label="表格操作"
                            property="name"
                            width="140"
                        >
                            <el-link type="primary">修改</el-link>
                            &nbsp;
                            <el-link type="danger">删除</el-link>
                        </el-table-column>
                    </el-table>
                </el-row>

                <!-- 分页 -->
                <el-row :gutter="20" class="page">
                    <el-col :span="8"></el-col>
                    <el-col :span="8">
                        <el-pagination
                            v-model:current-page="currentPage4"
                            v-model:page-size="pageSize4"
                            :page-sizes="[100, 200, 300, 400]"
                            :small="small"
                            :disabled="disabled"
                            :background="background"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="400"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { TabsPaneContext, ElTable } from 'element-plus'
import {
    Check,
    Delete,
    Edit,
    Message,
    Search,
    Star,
} from '@element-plus/icons-vue'
const background = ref(true)
const activeName = ref('first')
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]
</script>

<style scoped>
.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
.head {
    margin-bottom: 2em;
}
.page {
    margin-top: 2em;
}
</style>
